<%@ page language="java" trimDirectiveWhitespaces="true" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="../../common.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${staticPath}/weui/js/swiper.js"></script>
<script type="text/javascript" src="${staticPath}/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="${staticPath}/js/app/index/index.js"></script>
<script type="text/javascript" src="${staticPath}/js/html5media.min.js"></script>
<title>欢迎光临-星昊商城</title>
</head>
<style>
.swiper-container {
	width: 100%;
}

.swiper-container img {
	display: block;
	width: 100%;
}

.weui_grid_icon {
	width: 50px;
	height: 50px;
}

#header_div {
	height: 44px;
	width: 260px;
	background-color: transparent;
	position: absolute;
	top: 5px;
	left: 10px;
	z-index: 10;
}

#header_div a {
	color: black;
	/*font-size:20px;*/
	line-height: 44px;
	padding: 0 5px;
	text-decoration: none;
	vertical-align: middle;
}

#header_div div {
	height: 100%;
	border: none;
}

#header_div a img {
	height: 90%;
	border: none;
}

#header_div div {
	float: left;
}

.weui_grid2 {
	position: relative;
	float: left;
	/*padding: 10px 8px;*/
	padding: 5px;
	width: 25%;
	box-sizing: border-box;
}

.centertop2 {
	width: 100%;
	height: auto;
	background: url(${staticPath}/images/centerbg2.jpg);
	/*background-color: #4f7ac8;*/
}

.centertx2 {
	width: 100%;
	height: 80px;
	text-align: center;
}

.centertx2 img {
	width: 40px;
	height: 40px;
	margin-top: 10px;
}

.centertx2 h3 {
	color: #fff;
	font-size: 14px;
}

.centerm2 {
	width: 100%;
	height: 40px;
	/*background: #4f7ac8;*/
	background: #9dc9d1;
}

.centerml2 {
	width: 33%;
	height: 40px;
	border-right: #fff 1px solid;
	float: left;
	line-height: 20px;
	color: #fff;
	text-align: center;
	font-size: 12px;
}

.centermr2 {
	width: 33%;
	height: 40px;
	float: left;
	line-height: 20px;
	color: #fff;
	text-align: center;
	font-size: 12px;
}

.centermr2 img {
	width: 14px;
	height: 14px;
}

.search_cancle {
	margin-left: 10px;
	line-height: 28px;
	white-space: nowrap;
	color: #6091ed;
}

#goTopBtn {
	position: fixed;
	width: 50px;
	height: 50px;
	bottom: 80px;
	right:10px;
	line-height: 50px;
	cursor: pointer;
	display: none;
	background: url(${staticPath}/images/top.png);
}
#hongbao {
	z-index:10000;
	position: fixed;
	width: 90px;
	height: 90px;
	top: 30px;
	right:5px;
	line-height: 50px;
	cursor: pointer;
	background: url(${staticPath}/images/getRed.gif)no-repeat ;
	background-size:cover;
}
#hongbaoTime {
	color:red;
	z-index:10000;
	text-align:center;
	position: fixed;
	width: 90px;
	height: 20px;
	top: 110px;
	right:10px;
	cursor: pointer;
}
.prism-player{
	padding-left: 10px; 
	padding-right: 10px; 
}
.weui_grid_label{
	font-size: 12px;
}
img.lazy-img{
	min-height: 70px;
}
</style>
<body ontouchstart>
<!-- 
	<header class="OldHeader" style="border-bottom: #6b99ee 1px solid;">
	</header>
 -->
 <div>
 <div id="body_div">
 		<div id="title_div">
			<div class="OHeader" style="height: 44px; line-height: 44px; background: #c6e8ea;z-index: 2">
				<c:choose>
					<c:when test="${member!=null}">
						<div style="height: 44px;line-height: 40px;">
							<img style="float: left; color: #fff; margin:2px 10px;"  height="40px"  src="${staticPath}/images/logo1.png" >
							<a class="wx-hidden-a" href="javascript:logout();" style="float: left; color: #000; margin: 2px 10px;" >注销</a>
						</div>
					</c:when>
					<c:otherwise>
						<div style="height: 44px;line-height: 40px;">
							<img height="40px" style="float: left; color: #fff; margin:2px 10px;"  src="${staticPath}/images/logo1.png" >
							<a class="wx-hidden-a" href="<%=appPath%>/member/login.html" style="float: left; color: #000; margin: 2px 10px;" >登录</a>
							<a class="wx-hidden-a" href="<%=appPath%>/member/register.html" style="float: left; color: #000; margin: 2px 10px;" >注册</a>
						</div>
					</c:otherwise>
				</c:choose>
			</div>
			<div class="centerOHeadset" style="z-index: 2">
				<a href="javascript:showSearchBar();" ><img src="${staticPath}/images/search.png"></a>
			</div>
		<c:if test="${member!=null}">
			<div class="centertop2">
				<div class="centertx2">
					<img src="${member.avatar}" onerror="javascript:this.src='${staticPath}/images/nologin.png'" onclick="javascript:gotoHtml('/center/center.html');">
					<h3><a href="javascript:gotoHtml('/center/center.html');" style="color: #fff;">${member.name}</a></h3>
				</div>
				<div class="centerm2">
					<div class="centerml2">
						<p>可用积分</p>
						<p>${points}</p>
					</div>
					<div class="centerml2">
						<p>可用余额</p>
						<p><fmt:formatNumber value="${purse * 0.01}" pattern="#,###.##" /></p>
					</div>
					<div class="centermr2" style="line-height: 40px">
						<p>${dealerlevel.name}</p>
						<!-- 
						<img src="${dealerlevel.name}">
						 -->
					</div>
				</div>
			</div>
		</c:if>
	</div>
	<c:set var="emptyUrl" value=""></c:set>
	<div id="container">
		<c:forEach items="${indexClasses}" var="indexClass">
		<c:choose>
		<%--
		 --%>
			<c:when test="${indexClass.showType==101}">
			   <!-- 轮播 -->
				<div class="swiper-container">
					<!-- Additional required wrapper -->
					<div class="swiper-wrapper">
						<!-- Slides -->
						<c:set var ="dataKey" value="dataListOfIndexClass${indexClass.id}" />
						<c:forEach items="${indexDataMap[dataKey]}" var = "indexData">
							<div class="swiper-slide">
								<a href="javascript:toLink('${indexData.dataType }','${indexData.dataId}','${10==indexData.dataType?indexData.dataName:emptyUrl}');">
									<!-- 
									<img src="${staticPath}/images/grey.gif" data-img ="${indexData.image}"  isload="false" />
									 -->
									<img src="${indexData.image}" />
								</a> 
							</div>
						</c:forEach>
					</div>
					<!-- If we need pagination -->
					<div class="swiper-pagination"></div>
				</div>
			</c:when>
			<c:when test="${indexClass.showType==102}">
				<!-- 分类 -->
				<div class="weui_grids2">
					<c:set var ="dataKey" value="dataListOfIndexClass${indexClass.id}" />
					<c:forEach items="${indexDataMap[dataKey]}" var = "indexData">
					<a href="javascript:toLink('${indexData.dataType }','${indexData.dataId}','${10==indexData.dataType?indexData.dataName:emptyUrl}');" class="weui_grid2 js_grid" data-id="button">
						<div class="weui_grid_icon">
						<!-- 
							<img src="${staticPath}/images/grey.gif" data-img ="${indexData.image}"  isload="false" />
							<img class="lazy-img" data-original="${indexData.image}" width="46px;" height="46px;" />
						 -->
							<img src="${indexData.image}" />
						</div>
						<p class="weui_grid_label">${indexData.title}</p>
					</a>
					</c:forEach>
				</div>
				<div class="clear" style="clear: both;"></div>
			</c:when>
			<c:when test="${indexClass.showType==103}">
				<!-- 广告 -->
				<div class="index-title">
					<img src="${staticPath}/images/icon_tit1.png">
					<h5>${indexClass.title}</h5>
				</div>
				<div class="index-pic">
					<c:set var ="dataKey" value="dataListOfIndexClass${indexClass.id}" />
					<c:forEach items="${indexDataMap[dataKey]}" var = "indexData">
						<c:choose>
							<c:when test="${8==indexData.dataType}">
								<!-- 视频 -->
								<!-- 
								<div class="prism-player" id="J_prismPlayer${indexData.id}" dataurl="${indexData.image}" coverurl="${indexData.title}">
								</div>
								<div class="prism-player" id="J_prismPlayer${indexData.id}" dataurl="${indexData.dataName}" coverurl="${indexData.image}" heightdate="${indexData.title}">
								</div>
								 -->
								<video src="${indexData.dataName}" poster="${indexData.image}" width="100%" height="${indexData.title}"  webkit-playsinline="true" -webkit-playsinline="true" controls preload></video>
							</c:when>
							<c:otherwise>
								<a href="javascript:toLink('${indexData.dataType}','${indexData.dataId}','${10==indexData.dataType?indexData.dataName:emptyUrl}');">
								<!-- 
									<img src="${staticPath}/images/grey.gif" data-img ="${indexData.image}"  isload="false" />
								 -->
									<img class="lazy-img" data-original="${indexData.image}"  width="100%"  />
								</a>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</div>
			</c:when>
			<c:when test="${indexClass.showType==104}">
				<div style="clear: both;"></div>
				<!-- 双列 -->
				<div class="index-title">
					<img src="${staticPath}/images/icon_tit1.png">
					<h5>${indexClass.title}</h5>
				</div>
				<div class="index-pic2">
					<c:set var ="dataKey" value="dataListOfIndexClass${indexClass.id}" />
					<c:forEach items="${indexDataMap[dataKey]}" var = "indexData" varStatus="index">
						<c:choose>
							<c:when test="${index.index%2==0}">
								<a href="javascript:toLink('${indexData.dataType }','${indexData.dataId}','${10==indexData.dataType?indexData.dataName:emptyUrl}');">
									<!-- 
									<img src="${staticPath}/images/grey.gif" data-img ="${indexData.image}"  isload="false" />
									<img src="${indexData.image}" />
									 -->
									<img class="lazy-img" data-original="${indexData.image}"  width="100%" height="280px" />
								</a>
							</c:when>
							<c:otherwise>
								<span>
									<a href="javascript:toLink('${indexData.dataType }','${indexData.dataId}','${10==indexData.dataType?indexData.dataName:emptyUrl}');">
									<!-- 
										<img src="${staticPath}/images/grey.gif" data-img ="${indexData.image}"  isload="false" />
										<img src="${indexData.image}"  />
									 -->
										<img class="lazy-img" data-original="${indexData.image}"  width="49%" height="77px" />
									</a>
								</span>
							</c:otherwise>	
						</c:choose>
					</c:forEach>
				</div>
			</c:when>
			<c:when test="${indexClass.showType==105}">
				<div style="clear: both;"></div>
				<!-- 单列 -->
				<div class="index-title">
					<img src="${staticPath}/images/icon_tit1.png">
					<h5>${indexClass.title}</h5>
				</div>
				<div class="index-pic">
					<c:set var ="dataKey" value="dataListOfIndexClass${indexClass.id}" />
					<c:forEach items="${indexDataMap[dataKey]}" var = "indexData" varStatus="index">
						<c:choose>
							<c:when test="${8==indexData.dataType}">
								<!-- 视频 -->
								<!-- 
								<div class="prism-player" id="J_prismPlayer${indexData.id}" dataurl="${indexData.image}" coverurl="${indexData.title}">
								</div>
								<div class="prism-player" id="J_prismPlayer${indexData.id}" dataurl="${indexData.dataName}" coverurl="${indexData.image}" heightdate="${indexData.title}">
								 -->
								<video src="${indexData.dataName}" poster="${indexData.image}" width="100%" height="${indexData.title}" controls preload></video>
								</div>
							</c:when>
							<c:otherwise>
								<a href="javascript:toLink('${indexData.dataType}','${indexData.dataId}','${10==indexData.dataType?indexData.dataName:emptyUrl}');">
								<!-- 
									<img src="${staticPath}/images/grey.gif" data-img ="${indexData.image}"  isload="false" />
									<img src="${indexData.image}" />
								 -->
									<img class="lazy-img" data-original="${indexData.image}"  width="100%"  />
								</a>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</div>
			</c:when>
		</c:choose>
		</c:forEach>
	</div>
		<div id="space_footer_div"></div>
		<div class="weui_tabbar"  id="footer_div" style="position: fixed;bottom: 0;">
			<a href="javascript:gotoHtml('/index.html')" class="weui_tabbar_item weui_bar_item_on">
				<div class="weui_tabbar_icon">
					<img src="${staticPath}/images/home2.png" alt="">
				</div>
				<p class="weui_tabbar_label">首页</p>
			</a>
			<a href="javascript:gotoHtml('/goodsClass/index.html');" class="weui_tabbar_item">
				<div class="weui_tabbar_icon">
					<img src="${staticPath}/images/sort.png" alt="">
				</div>
				<p class="weui_tabbar_label">分类</p>
			</a>
			<a href="<%=appPath%>/cart/list.html" class="weui_tabbar_item cart">
				<div class="weui_tabbar_icon ">
					<img src="${staticPath}/images/shop.png" alt="">
				</div>
				<p class="weui_tabbar_label">购物车</p>
			</a>
			<a href="javascript:gotoHtml('/center/center.html');" class="weui_tabbar_item">
				<div class="weui_tabbar_icon">
					<img src="${staticPath}/images/main2.png" alt="">
				</div>
				<p class="weui_tabbar_label">我的</p>
			</a>
			<a  href="javascript:kefu();" class="weui_tabbar_item">
				<div class="weui_tabbar_icon">
					<img src="${staticPath}/images/service.png" alt="">
				</div>
				<p class="weui_tabbar_label">客服</p>
			</a>
		</div>
		
	<!-- -------搜索框 start---------- -->
	<div id="search_div" class="weui-popup-container weui-popup-container-visible" style="display: none">
		<div class="weui_search_bar" id="search_bar">
			<form class="weui_search_outer"  action="<%=appPath%>/goods/findPageResult.html">
				<div class="weui_search_inner">
					<i class="weui_icon_search"></i> 
					<input type="search" class="weui_search_input" id="search_input" name="keyWord" value="${goodsQueryBean.keyWord}" placeholder="搜索" required /> 
					<a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
				</div>
				<label for="search_input" class="weui_search_text" id="search_text"> <i class="weui_icon_search"></i> <span>搜索</span>
				</label>
			</form>
			<a href="javascript:void(0);" class="search_cancle close-popup"  id="search_cancel">取消</a>
		</div>
	</div>
	<!-- -------搜索框 end---------- -->
	<div id="hongbao" style="display:none;" onclick="gotoHtml('/red/index.html')"></div>
	<div id="hongbaoTime" style="display:none;">
	<div id="nobegin">
	<strong style="font-size:12px;margin:0px;padding:0px;" id="hour_show">0时</strong><strong style="font-size:12px;margin:0px;padding:0px;" id="minute_show">0分</strong><strong style="font-size:12px;margin:0px;padding:0px;" id="second_show">0秒</strong>
	</div>
	<div id="begin" style="display:none">
	<strong style="font-size:12px;margin:0px;padding:0px;" id="hour_show" >红包发放中</strong>
	</div>
	</div>
	<div id="goTopBtn"></div>
</div>
</body>
</html>